<template>
	<!-- 直播   订阅视频-->
	<view>
		<!-- <view class="Mtext">显示农历和标记点</view> -->
		<view class="L0">
			<Calendar :currentTime='currentTime' :mark='mark' @dayChange='dayChange' @monthChange='monthChange'
				:rangeMode='rangeMode' :range='range' @rangeChange='rangeChange' :dateStart='dateStart' :dateEnd='dateEnd'
				:canDrag='true'>
			</Calendar>
		</view>
		
		<view class="botsny">
			<view>
				<button class="button-yuanjiao" hover-class="hove-cl" @click="dianji()">预约直播</button>		 
			</view>
			<view>
				 <button class="button-yuanjiao" hover-class="hove-cl" @click="wrhk()">往日回看</button>			 
			</view>
			<view>
				 <button class="button-yuanjiao" hover-class="hove-cl" @click="wd()">我的预约</button>
			</view>
		</view>
		
		<view v-if="showkey==1">
			<image class="zbtp" src="../../static/uni-center/zhibo.png"></image>
		</view>
		
		<view v-if="showkey==2" class="L1">
			<!-- <image class="zbtp" src="../../static/uni-center/aa.png"></image> -->
			<view class="center-list">
				<view class="center-list-item">
					<text class="list-text" style="color: #555;">视频名称</text>
					<text class="list-text1" style="color: #555;">点击量</text>
					<text class="list-text2" style="color: #555;">查看视频</text>
				</view>
			</view>
			<view class="center-list" v-for="item in list">
				<view class="center-list-item border-bottom">
					<text class="list-text">{{item.vodName}}</text>
					<text class="list-text1">{{item.playCount}}</text>
					<text class="navigat-arrow" @click="cksp(item.videoSourceId)">&#xe65e;</text>
				</view>
			</view>
		</view>
		
		<view v-if="showkey==3">
			<image class="zbtp" src="../../static/uni-center/aa.png"></image>
		</view>
	</view>
</template>

<script>
	import Calendar from '@/common/Li-Calendar.vue';
	export default {
		components: {
			Calendar
		},
		data() {
			return {
				mark: [{
						time: '2021-11-12',
						text: '直播',
						markPoint: true,
						markTextColor: 'blue',
						pointText: '2',
						pointTextColor: 'red'
					},
					{
						time: '2021-11-6',
						text: '直播',
						markPoint: true,
						pointText: '1',
					}
				],
				range: {
					rangeStart: undefined, //设置标记范围开始，yyyyMM-dd
					rangeEnd: undefined //设置标记范围结束，yyyyMM-dd
				},
				rangeMode: false,
				currentTime: '',
				title: 'Hello',
				dateStart: '2001-11-15',
				dateEnd: '2029-6-15',
				showkey: '',
				
				list:[]
			}
		},
		onLoad() {

		},
		methods: {
			dianji(){
				this.showkey = 1
				console.log(this.showkey)
			},
			wrhk(){
				this.showkey = 2
				// 查看所有视频
				uni.request({
					url: 'http://localhost:8099/serviceedu/video/findAll',
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data.data.list)
						this.list = res.data.data.list
					}
				})
			},
			wd(){
				this.showkey = 3
			},
			dayChange(data) {
				console.log(data)
			},
			monthChange(data) {
				console.log(data)
			},
			setDate() {
				this.currentTime = time.time
			},
			setRange() {
				this.range = {
					rangeStart: '2019-8-10', //设置标记范围开始，yyyyMM-dd
					rangeEnd: '2019-8-20' //设置标记范围结束，yyyyMM-dd
				}
			},
			setRangeMode() {
				this.rangeMode = !this.rangeMode;
			},
			rangeChange(data) {
				console.log(data)
			},
			
			cksp(videoSourceId){
				uni.reLaunch({
					url:'../message/player?videoId='+videoSourceId
				})
				// console.log(videoSourceId)
			}
			
			
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype'),
			url('/iconfont/iconfont.woff2?t=1635490252890') format('woff2'),
			url('/iconfont/iconfont.woff?t=1635490252890') format('woff'),
			url('/iconfont/iconfont.ttf?t=1635490252890') format('truetype');
	}
	
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.box {
		width: 100px;
		height: 100px;
		background: #F1F1F1;
	}

	.box-active {
		background: #4CD964;
	}

	.box2 {
		width: 200px;
		height: 200px;
		background: #007AFF;
	}

	.box2-active {
		background: pink;
	}
	
	
	
	.botsny{
		/* background-color: blue; */
		height: 30px;
		
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: flex-start;
		margin-bottom: 10rpx;
	}
	
	.botsny>view{
			/* border:lupx solid #333333; */
			height: 30px;
			width: 100px;
			margin-left: 20px;
		}
		
	.button-yuanjiao{
		height: 30px;
		width: 80px;
		display: flex;
		/* justify-content: center; */
		margin-left: 5px;
		border-radius: 25px;
		background-color: #8bcbaf;
		font-size: 28rpx;
		color: #ffffff;
		
	}
	
	.zbtp{
		width: 300px;
		height: 200px;
		margin-left: 30px;
	}
	
	.hove-cl{
		color: #1AAD19;
	}
	
	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 100%;
		flex-direction: column;
	}
	
	.center-list-item {
		height: 90upx;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}
	
	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}
	
	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
		margin-left: 20px;
	}
	
	.list-text1 {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
		margin-left: 50px;
	}
	
	.list-text2 {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
		/* 浮动 */
		float:right;
	}
	
	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		/* 浮动 */
		float:right;
		font-family: texticons;
	}
	
	.L1{
		overflow-y:auto;
		width:95%;
		height:200px;
		background-color: #f1f1f1;
		margin-left: 10px;
	}
</style>
